<template>
    <div class="date">
        <div class="block">
            <span class="demonstration">选择日期</span>
            <el-date-picker
                    v-model="date"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component, Prop, Watch} from 'vue-property-decorator';

    @Component
    export default class DatePicker extends Vue {
        @Prop() value!: Date | undefined;
        // today = new Date().toLocaleDateString('zh-CN')
        date = this.value;



        @Watch('date')
        getDate(value: Date) {
            if (this.date) {
                let formatDate = this.date.toLocaleDateString('zh-CN');
                console.log(formatDate);
                this.$emit('update:value', formatDate);
            }
        }

        // mounted(){
        //     console.log(this.value,'父亲来的时间')
        // }

    }
</script>

<style lang='scss' scoped>
    .date{
    display: flex;
    justify-content: flex-start;
    padding-left: 16px;
    font-size: 14px;
}

</style>
<style lang='scss'>
    .date {
        .block{
            .el-input__inner {
                border: 1px solid transparent ;
                background:  #f5f5f5;
            }
        }

    }
</style>